<template>
  <div>
    <h1>课程列表页面</h1>
    <div>
      <div>姓名： {{ name + name1 }}</div>
      <div>年龄：{{ infoList.age }}</div>
    </div>
    <div>
      <div>解构姓名： {{ patternVisible }}</div>
      <div>解构年龄：{{ aboutExeVisible }}</div>
    </div>
    <div>我的数据---请求：{{ params.responseData[9] }}</div>
    <div v-for="(item, index) of params.responseData" :key="index">
      {{ item.title }}
    </div>
  </div>
</template>

<script setup>
import { reactive, toRef, toRefs } from "vue";
import { getCourseList } from "@/http/api";
// ----------toRef和toRefs的用法与示例----------------------------------
// 把数组对象【全部】设置成响应式，但是如果对象数组太大，而且只需要响应其中某一个值，要是全部响应，就会大大影响性能。
// name: toRef(person, 'name'), 因此，toRef就有了响应数组对象中【某一个值】的响应
// ...toRefs(person), toRefs 是只把对象的【父级】（name,age,job）全部设定为响应
// toRef和toRefs值改变的时候需要加.value

let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20 } } }); // person对象
let name = toRef(person, "name");
let name1 = name.value + "12";
let infoList = toRefs(person);
const data = reactive({
  patternVisible: 1,
  debugVisible: 2,
  aboutExeVisible: 3,
});
// 解构写法
const { patternVisible, debugVisible, aboutExeVisible } = data;

// 请求数据
let params = reactive({
  responseData: [],
  datas: []
});
let getData = async () => {
  let data = await getCourseList();
  params.responseData = data;
  // console.log("请求的数据呀呀呀 子组件-------", params.responseData);
};
getData();
</script>
<style lang="scss" scoped module></style>
